<template>
  <div>
  <el-card>
  <el-page-header @back="goBack" content="章节详细">
      
    </el-page-header>
    <div style="float: left; width: 150px; margin-bottom: 20px">
        <el-button @click="openUnitAdd()" type="primary" size="small">添加章节</el-button>
      </div>
      <el-table :data="unitData" style="width: 100%; margin-top: 10px; margin-left: 15px"  show-overflow-tooltip default-expand-all row-key="id" stripe lazyb
        >
        <el-table-column width="55"></el-table-column>
        <el-table-column prop="id" label="序号" align="center" width="55">
        </el-table-column>
        <el-table-column prop="unitName" label="章节名称" align="center">
        </el-table-column>
        <el-table-column prop="unitIntroduction" label="章节介绍" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="openJoint(scope.row)">查看课程</el-button>
            <el-button type="primary" size="small" slot="reference" @click="delUnit(scope.row.id)">修改</el-button>
            <el-button type="primary" size="small" slot="reference" @click="delUnit(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </el-card>
    
  </div>

</template>

<script>
export default {
  data() {
    return {
      courseId: 0,
      //章节数组
      unitData: [],
    };
  },
  mounted() {
    // 在目标页面获取id参数
    this.courseId = this.$route.params.id;
    console.log(this.courseId)
    this.selectUnit()
  },
  methods: {
    goBack() {
        this.$router.push('/course')
    },
    openJoint(row){
    // 跳转并传递参数
      this.$router.push({
        name: 'joint',
        params: {
          courseId:this.courseId,
          unitId:row.id

        }
      });
    },
    //根据课程全查章节
    selectUnit() {
      this.$axios
        .get("http://127.0.0.1:8088/newCourse/selectUnit", {
          params: {
            courseId: this.courseId,
          },
        })
        .then((res) => {
          if ((res.code = 200)) {
            this.unitData = res.data.data.content;
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style>
</style>